<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 vue指令</title>
    <script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>
</head>

<body>
    <div id="app">
        <button v-on:click="fun()">单击按钮</button>
        <!-- 6.v-on给元素添加事件:dblclick双击事件,click单击事件 -->
        <button v-on:dblclick="fun()">双击按钮</button>
        <!-- 练习:用vue做一个点赞的按钮 
				QQ:2250432165
			-->
        <button v-on:click="count++">点赞{{count}}</button>

        <!-- 7.v-bind: 把后面出现的数据当变量使用,会解析变量的值-->
        <a href="https://www.baidu.com/">点我,百度一下</a>
        <!-- 问题:把url当字符串了,而不是当变量用的 -->
        <a href="{{url}}">点我,百度一下</a>
        <a v-bind:href="url" target="_blank">点我,百度一下</a>
    </div>
    <script>
        new Vue({
            el: "#app", //挂载点
            data: { //准备数据
                count: 0, //点赞数
                url: 'https://www.baidu.com'
            },
            methods: { //创建函数
                fun() {
                    console.log(1);
                }
            }
        })
    </script>
</body>

</html>